<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./1.css/加入购物车划过.css" />
    <link rel="stylesheet" href="./1.css/首页.css" />
    <link rel="stylesheet" href="./1.css/首页划过.css" />
    <link rel="stylesheet" href="./1.css/swiper-bundle.min.css" />

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>

    <style>
      html,
      body {
        position: relative;
        height: 580px;
      }

      body {
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper-container {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div id="div1">
      <!-- 头部 -->
      <header>
        <ul id="a1">
          <li class="logo"></li>
          <li></li>
          <li></li>
          <li>
            <img src="./1.img/1.png" class="i1" />
          </li>
          <li></li>
          <li style="font-weight: bolder">z30pro</li>
          <li>红魔</li>
          <li style="font-weight: bolder">play</li>
          <li>智能生态</li>
          <li>品牌</li>
          <li>服务</li>
          <li>社区</li>
          <li>体验区</li>
          <li></li>
          <li></li>
          <li class="gou">🛒</li>
        </ul>

        <!-- 下拉菜单 -->
        <div class="xiala">
          <img src="./1.img/2.jpg" />
          <img src="./1.img/3.jpg" />
          <img src="./1.img/4.jpg" />
          <img src="./1.img/5.jpg" />
      </header>
      <!-- 轮播图 -->
      <div class="lunbo">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img
                style="width: 100%; height: 580px"
                src="./1.img/2.jpg"
                alt=""
              />
            </div>
            <div class="swiper-slide">
              <img
                style="width: 100%; height: 580px"
                src="./1.img/3.jpg"
                alt=""
              />
            </div>
            <div class="swiper-slide">
              <img
                style="width: 100%; height: 580px"
                src="./1.img/4.jpg"
                alt=""
              />
            </div>
            <div class="swiper-slide">
              <img
                style="width: 100%; height: 580px"
                src="./1.img/5.jpg"
                alt=""
              />
            </div>
            <div class="swiper-slide">
              <img
                style="width: 100%; height: 580px"
                src="./1.img/6.jpg"
                alt=""
              />
            </div>
            <div class="swiper-slide">
              <img
                style="width: 100%; height: 580px"
                src="./1.img/2.jpg"
                alt=""
              />
            </div>
            <div class="swiper-slide">
              <img
                style="width: 100%; height: 580px"
                src="./1.img/3.jpg"
                alt=""
              />
            </div>
            <div class="swiper-slide">
              <img
                style="width: 100%; height: 580px"
                src="./1.img/5.jpg"
                alt=""
              />
            </div>
            <div class="swiper-slide">
              <img
                style="width: 100%; height: 580px"
                src="./1.img/2.jpg"
                alt=""
              />
            </div>
            <div class="swiper-slide">
              <img
                style="width: 100%; height: 590px"
                src="./1.img/6.jpg"
                alt=""
              />
            </div>
          </div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <!-- 购买图 -->
      <div class="img1">
        <img class="img11" src="./1.img/中.jpg" alt="" />
        <img class="img2" src="./1.img/中1.png" />
        <button class="btns1">立即购买</button>
        <a class="a" href="查看详情列表.html">查看详情></a>
      </div>
      <!-- 四张图 -->
      <div class="xia">
        <img src="./1.img/下1.png" alt="" />
        <img src="./1.img/下2.png" alt="" />
        <img src="./1.img/下3.png" alt="" />
        <img src="./1.img/下4.png" alt="" />
      </div>
      <div class="zui">
        <img src="./1.img/最后.png" alt="" />
      </div>
      <!-- 三个 -->
      <div class="san">
        <div class="san1">
          <div class="san2">
            <img src="./1.img/最后1.png" />
            <h6>产品热评</h6>
            <h4>[官方活动] 努比亚星空Z约寻“星”计划摄影征集</h4>
            <br />
            <p class="aa">了解更多></p>
          </div>
          <div class="san3">
            <img src="./1.img/最后2.png" />
            <h6>新闻中心</h6>
            <h4>努比亚&红魔618开门红超级攻略，请查收！</h4>
            <br />
            <p class="aa">了解更多></p>
          </div>
          <div class="san4">
            <img src="./1.img/最后3.png" />
            <h6>视频长廊</h6>
            <h4>腾讯红魔游戏手机6新品发布</h4>
            <br />
            <p class="aa">了解更多></p>
          </div>
        </div>
      </div>
      <!-- 无理由退货 -->
      <div id="xi">
        <div class="xi">
          <span class="xia">
            <div class="xia1">(；´д｀)</div>
            <br /><br /><br /><br />
            <p class="xia2">七天无理由退货</p>
          </span>
        </div>
        <div class="xi">
          <span class="xia">
            <div class="xia1">(；´д｀)</div>
            <br /><br /><br /><br />
            <p class="xia2">七天无理由退货</p>
          </span>
        </div>
        <div class="xi">
          <span class="xia">
            <div class="xia1">(；´д｀)</div>
            <br /><br /><br /><br />
            <p class="xia2">七天无理由退货</p>
          </span>
        </div>
        <div class="xi">
          <span class="xia">
            <div class="xia1">(；´д｀)</div>
            <br /><br /><br /><br />
            <p class="xia2">七天无理由退货</p>
          </span>
        </div>
      </div>
      <!-- 最后的 -->
      <div class="zuihou">
        <ul class="ul1">
          <li class="li1">关于我们</li>
          <li></li>
          <li class="li1">手机</li>
          <li></li>
          <li class="li1">热门活动</li>
          <li></li>
          <li class="li1">服务支持</li>
          <li></li>
          <li class="zaixian">在线客服</li>
        </ul>
        <ul class="ul2">
          <li class="li2">关于bunubia</li>
          <li></li>
          <li class="li2">红魔手机</li>
          <li></li>
          <li class="li2">会员热线</li>
          <li></li>
          <li class="li2">售后服务</li>
          <li></li>
        </ul>
        <ul class="ul3">
          <li class="li3">联系我们</li>
          <li></li>
          <li class="li3">z30系列</li>
          <li></li>
          <li class="li3">码值通道</li>
          <li></li>
          <li class="li3">售后网点</li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li class="li3" style="color: #cacaca">全国服务热线</li>
        </ul>
        <ul class="ul4">
          <li class="li4">商家入驻</li>
          <li></li>
          <li class="li4">红魔6S</li>
          <li></li>
          <li class="li4">以旧换新</li>
          <li></li>
          <li class="li4">特色服务</li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li class="li4" style="color: #000; font-size: 20px">400-700-6600</li>
        </ul>
        <ul class="ul5">
          <li class="li5">企业购</li>
          <li></li>
          <li class="li5">红魔6</li>
          <li></li>
          <li class="li5">全民分销</li>
          <li></li>
          <li class="li5">软件下载</li>
          <li></li>
          <li></li>
          <li></li>
          <li class="li5" style="color: rgb(78, 76, 76); width: 230px">
            周一到周日8:30-20:30(全年无休)
          </li>
        </ul>
        <ul class="ul6">
          <li class="li6"></li>
          <li></li>
          <li class="li6">红魔5s</li>
          <li></li>
          <li class="li6"></li>
          <li></li>
          <li class="li6">产品安全</li>
          <li></li>
          <li></li>
          <li></li>
          <li
            class="li6"
            style="color: rgb(78, 76, 76); width: 230px; font-size: 15px"
          >
            关注我们;
            <img class="weixin" src="./1.img/微信.png" alt="" />
          </li>
        </ul>
        <ul class="ul7">
          <li class="li7"></li>
          <li></li>
          <li class="li7">红魔5G</li>
          <li></li>
          <li class="li7"></li>
          <li></li>
          <li class="li7"></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="dibu">
        <h3>
          2012-2021 深圳市努比亚信息技术有限公司 版权所有 | 粤ICP备18069660号
          <br /><br />
          ICP经营许可证编号：粤B2-20201516 | 粤公网安备 44030502000309号 |
          隐私政策 | 关于Cookie | 营业执照
        </h3>
        <h5>
          <img src="./1.img/国旗.png" />
          中国(简体中文/CNY)
        </h5>
      </div>
    </div>

    <script src="./js/1.JS"></script>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/首页.js"></script>
    <script src="./js/轮播.js"></script>
    <script>
      // 轮播
      var swiper = new Swiper(".swiper-container", {
        cssMode: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
        },
        mousewheel: true,
        keyboard: true,
      });
    </script>
  </body>
</html>
